---
title: <AutoField>
---

import { ConfigPreview } from "@/docs/components/Preview";
import { AutoField } from "@/puck";

# \<AutoField\>

Render a Puck field based on a [Field](/docs/api-reference/fields) object. Use this when building [custom fields](/docs/extending-puck/custom-fields) that need to use Puck-style fields internally.

<ConfigPreview
  label="Example"
  componentConfig={{
    fields: {
      title: {
        type: "custom",
        render: ({ onChange, value }) => {
          return (
            <AutoField
              field={{ type: "text" }}
              onChange={onChange}
              value={value}
            />
          );
        },
      },
    },
    defaultProps: {
      title: "Hello, world",
    },
    render: ({ title }) => {
      return <p style={{ margin: 0 }}>{title}</p>;
    },
  }}
/>

```tsx {1,4} copy
import { Autofield } from "@measured/puck";

const CustomField = ({ onChange, value }) => (
  <AutoField field={{ type: "text" }} onChange={onChange} value={value} />
);

const config = {
  components: {
    Example: {
      fields: {
        title: {
          type: "custom",
          render: MyCustomField,
        },
      },
    },
  },
};
```

## Props

| Prop                    | Example                      | Type                                | Status   |
| ----------------------- | ---------------------------- | ----------------------------------- | -------- |
| [`field`](#field)       | `{ type: "text" }`           | [Field](/docs/api-reference/fields) | Required |
| [`onChange`](#onchange) | `onChange("Goodbye, world")` | Function                            | Required |
| [`value`](#value)       | `"Hello, world"`             | Any                                 | Required |
| [`id`](#id)             | `"my-input"`                 | String                              | -        |
| [`readOnly`](#readonly) | `true`                       | Boolean                             | -        |

## Required Props

### `field`

An object containing the user defined [Field](/docs/api-reference/fields) configuration.

### `onChange`

A callback that triggers when the value changes.

### `value`

The current value for the field.

## Optional Props

### `id`

An optional ID for this field. Will be generated if not specified.

### `readOnly`

A boolean describing whether or not this field is `readOnly`.

## Further reading

- [Custom fields](/docs/extending-puck/custom-fields)
- [The `<FieldLabel>` API reference](/docs/api-reference/components/field-label)
